<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input placeholder="请输用户名/邮箱/密码" v-model="content" size="small" style="width: 200px"></el-input>
        <el-button type="success" style="margin-left: 10px" size="mini" @click="doquery()"><i
          class="iconfont icon-search"></i>查询
        </el-button>
        <el-button type="primary" size="mini" @click="toadd()"><i class="iconfont icon-add"></i>添加</el-button>
        <el-button type="danger" size="mini" @click="deleteRol"><i class="iconfont icon-delete"></i>批量删除</el-button>

      </el-col>
      <el-col :span="12" style="display: flex;justify-content: flex-end;">
        <el-button-group>
          <el-tooltip effect="dark" content="导出到excel" placement="top">
            <el-button size="mini" @click="exportusers"><i class="iconfont icon-Excel"></i></el-button>
          </el-tooltip>
        </el-button-group>
      </el-col>
    </el-row>

    <el-table :data="users" ref="multipleTable" stripe style="width: 100%" size="mini"
              @selection-change="selectTableRows">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" sortable label="ID" width="60"></el-table-column>
      <el-table-column prop="name" sortable label="用户名" width="100"></el-table-column>
      <el-table-column prop="roles" label="角色" width="200"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="mobile" label="手机号" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="100" :formatter="statusFormatter"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="warning" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="userFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="form" size="small">
        <el-form-item label="姓名" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" style="margin-right: 80px">

          <el-select v-model="form.roleidarr" multiple placeholder="请选择" style="width: 100%">
            <el-option
              v-for="role in roles"
              :key="role.id"
              :label="role.remark"
              :value="role.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import axios from "axios"
  import qs from "qs"

  export default {
    data() {
      return {
        title: "",
        userFormVisible: false,
        formLabelWidth: '100px',
        form: {
          roleidarr: [],
        },
        content: "",
        users: [],
        roles: [],
        total: 100,
        currentPage: 1,
        pageSize: 10,
        ids: [],
        deleteIds:''
      }
    },
    mounted() {
      this.page();

    },
    methods: {

      //导出excel格式
      exportusers(){
        window.location.href = "/sys/user/export"
      },
      //状态列的格式化
      statusFormatter(row) {
        return row.status == "1" ? "已启用" : "已禁用"
      },
      //添加用户
      toadd() {
        this.userFormVisible = true;
        this.title = "添加用户";
        this.getRoles();
        this.form={};
      }, //获取角色
      getRoles() {
        if (this.roles.length == 0) {
          var that = this;
          axios.get("/sys/role/all").then((res) => {
            that.roles = res.data;
          })
        }
      },
      //弹框保存
      saveUser() {
        //关闭对话框
        this.userFormVisible = false;
        //进行保存的操作
        var that = this;
        var roleids = "";
        for (var i in this.form.roleidarr) {
          roleids = roleids + "," + roleidarr[i];
        }
        //选择角色之后设置
        if (roleids) {
          this.form.roleids = roleids;
        }
        axios.post("/sys/user", qs.stringify(this.form)).then(function (response) {
          var mes = response.data.message;
          if (response.data.code == "200") {
            that.$notify({
              title: '成功',
              message: mes,
              type: 'success'
            });
          } else {
            that.$notify.error({
              title: '失败',
              message: mes,
            });
          }
        })
      },
      //编辑按钮
      toEdit(row) {
        this.getRoles();
        this.userFormVisible = true;
        this.title = "编辑用户";
        var data = this.copy(row);

        var idstr = row.roleIds
        if (idstr) {
          var idArr = idstr.split(",")
          var ids = [];
          for (var i in idArr) {
            ids.push(idArr[i] * 1);
          }
          data.roleidarr = ids;
        }
        this.form = data;

      },
      copy(obj) {
        var newobj = {};
        for (var attr in obj) {
          newobj[attr] = obj[attr];
        }
        return newobj;
      },
      //分页相关
      pageSizeChange(val) {
        this.pagesize = val;
        this.page()
      },
      pageChange(val) {
        this.currentPage = val;
        this.page();
        console.log(this.currentPage)//2
      },
      page() {
        var that = this;
        axios.get("/sys/user/list", {
          params: {
            content: that.content,
            pageSize: that.pageSize,
            cPage: that.currentPage
          }
        }).then(function (response) {
          that.users = response.data.rows;
          that.total = response.data.total;
          console.log(that.users)
        })
      },
      //查询方法
      doquery() {
        this.currentPage = 1;
        this.page();
      },
      selectTableRows(val) {
        this.ids = val;
        var idd = "";
        for (var i = 0; i < this.ids.length; i++) {
          idd = idd + "," + this.ids[i].id
        }
        idd = idd.substring(1);
        this.deleteIds = idd
      },deleteRol(){
        var that = this;
        axios.get("/sys/user/delete",{
          params:{
            "idd":that.deleteIds
          }
          }
        ).then(function (response) {
          var mes = response.data.message;
          if (response.data.code == "200") {
            that.$notify({
              title: '成功',
              message: mes,
              type: 'success'
            });
            that.page()
          } else {
            that.$notify.error({
              title: '失败',
              message: mes,
            });
          }
        })
      },
    }
  }
</script>

<style scoped>


</style>
